<template>
  <el-header id="head" style="text-align: right;font-size: 12px">
    <div :class="topTabs=='1'?'home active':'home'" @click="tabNav('1')">首页</div>
    <div class="topTab">
      <el-tabs
        v-model="topTabs"
        type="card"
        closable
        @tab-remove="removeTab"
        @tab-click="tabNav(topTabs)"
      >
        <el-tab-pane
          v-for="(item,index) in topNav"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >{{item.content}}</el-tab-pane>
      </el-tabs>
    </div>
    <el-dropdown>
      <i class="icon iconfont icon-icon-user"><span>{{userInfo.adminName}}</span></i>
      <el-dropdown-menu slot="dropdown">  
        <el-dropdown-item><span @click="logout()">退出登录</span></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-header>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import {request} from '../../assets/request.js'
import {session} from '../../assets/session.js'
import qs from 'qs'
export default {
  data() {
    return {
      editableTabsValue2: "1",
      topTabs:'',
      topNav:'',
      userInfo:'',
    };
  },
  created() {
    this.getSess()
    this.activeTab();
    this.userInfo=JSON.parse(session('get','user'));
    this.$root.$on("toRoouter",data=>{
      this.getSess()
    })
  },
  methods: {
    removeTab(targetName) {
      //tab移除
      let tabs = JSON.parse(session('get','topNav'))
      let activeName = session('get','leftActive')
      let topNav=''
      let leftNav=''
      if (targetName === activeName) {
        if(tabs.length<=1){
          activeName='1-1'
          tabs=[]
        }else{
          for (let i = 0, len = tabs.length; i < len; i++) {
            if (targetName == tabs[i].name) {
              let nextTab = tabs[i - 1] || tabs[i + 1]; //找出应该选中的 集合 删除的钱一个或后一个
              if (nextTab) {
                tabs.splice(i, 1);
                activeName = nextTab.name;  //当前页面的名称
                leftNav=nextTab.path        //当前页面的路径
                break;
              }
            }
          }
        }
        topNav = tabs
      }else{
        topNav = tabs.filter(tab => tab.name !== targetName);
      }
      this.$router.push({ path: leftNav }); //页面跳转
      topNav=JSON.stringify(topNav) //头部页面的数据列表  转换成json字符串
      session('set','topNav',topNav)
      session('set','leftActive',activeName)
      this.$root.$emit("tabNav",'no')
      this.getSess()
    },
    tabNav(ind) {
      let leftActive = ind;
      console.log(ind)
      if (ind != '1') {
        let tabNav = JSON.parse(session('get','topNav'))
        var obj = "";
        // 循环vuex库里面的tab找出被点击的   tab的路径
        for (let i = 0, len = tabNav.length; i < len; i++) {
          if (tabNav[i].name == ind) {
            obj = tabNav[i]
            break;
          }
        }
        // 跳转页面
        session('set','leftActive',leftActive)
        this.getSess()
        this.$router.push({ path:obj.path });
      } else {
        session('set','leftActive','1')
        this.$router.push({ path: "/index" });
        this.getSess()
      }
      this.$root.$emit("tabNav",'no')
    },
    activeTab() {
      let path = this.$route.path;
      let tabNav = JSON.parse(session('get','topNav'))
      // 选中当前路由中的 tab
      for (let i = 0, len = tabNav.length; i < len; i++) {
        if (tabNav[i].path == path) {
          this.editableTabsValue2 = tabNav[i].name;
          break;
        }
      }
    },
    logout(){
      this.setCookie("", "", -1);
      var url =request.url+ 'loginOut';
      let user=session('get','user')
      user=JSON.parse(user)
      this.$http({
            url: url,
            method: 'POST',
            // 请求体重发送的数据
            data:qs.stringify({
                username: user.name,
                greenToken: user.greenToken,
            }),
            // 设置请求头
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        .then(res => {
            var code = res.data.code
            if (code == 200) {
              this.$router.push({ path: '/login' });
              session('del','user') 
            }else{
              this.$message({
                message: '服务器在偷懒',
                type: 'warning'
              })
            }
        })
        .catch(err => {
            this.$message({
              message: '请求出错',
              type: 'warning'
            })
        })
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
        var exdate = new Date(); //获取时间
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
        //字符串拼接cookie
        window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
        window.document.cookie = "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    getSess(){
      this.topTabs=session('get','leftActive')
      this.topNav=JSON.parse(session('get','topNav'))
    }
  }
};
</script>
<style lang="less">
#head {
  position: relative;
  .el-header {
    background-color: #3399ff;
    color: #ffffff;
    line-height: 60px;
    display: block;
    width: 100%;
    position: relative;
  }
  .topTab {
    float: left;
    height: 40px;
    position: absolute;
    bottom: 0px;
    left: 91px;
    line-height: 40px;
    border: 0px;
  }
  .home {
    position: absolute;
    bottom: 0px;
    left: 20px;
    width: 70px;
    float: left;
    line-height: 40px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #318eec;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
  }
  .home.active {
    background: #ffffff;
    color: #222;
  }
  .home:hover {
    background: #ffffff;
    color: #222;
  }
  .el-tabs__nav {
    height: 40px;
  }
  .is-active {
    line-height: 40px;
    background: #ffffff;
    color: #222;
  }
  .el-tabs__item.is-active {
    color: #222;
  }
  .el-tabs__item {
    color: #ffffff;
    /* background: #318eec */
  }
  .el-tabs__item.is-active:hover {
    color: #222 !important;
  }
  .el-tabs__item:hover {
    color: #222222;
  }

  .el-dropdown {
    padding:0px 20px;
    height:60px;
    i {
      display: inline-block;
      height:60px;
      // background: #ff9900;
      color: #ffffff;
      font-size: 22px;
    }
    i span {
      font-size: 16px;
      vertical-align: 3px;
      margin-left:5px;
    }
  }
  .el-dropdown span {
    margin-right: 20px;
  }
  .item {
    margin-top: 0px;
    margin-right: 20px;
    line-height: 35px;
    margin-left: 40px;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    border-bottom: 0px;
    border-left: 0px;
    margin-right: 1px;
    background: #318eec;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    background: #ffffff;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item:hover {
    background: #ffffff;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: 0px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .el-tabs__nav-wrap {
    margin-bottom: 0px;
  }
  .el-tabs--card > .el-tabs__header {
    border-bottom: 0px;
  }
}
</style>
